<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜设计</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        .container {
            max-width: 414px;
            margin: 20px auto;
            background: white;
            min-height: 100vh;
            position: relative;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .back-button {
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        .header-action {
            font-size: 16px;
        }
        .content {
            padding: 15px;
        }
        .activity-info {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .activity-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .activity-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
        }
        .filter-tabs {
            display: flex;
            margin-bottom: 15px;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        .filter-tab {
            padding: 6px 12px;
            font-size: 14px;
            color: #666;
            background: #f5f5f5;
            border-radius: 16px;
            margin-right: 8px;
        }
        .filter-tab.active {
            background: #333;
            color: white;
        }
        .top-three {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            margin-bottom: 20px;
            padding: 0 10px;
        }
        .top-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .top-item.first {
            flex: 1;
            z-index: 3;
        }
        .top-item.second {
            flex: 0.8;
            z-index: 2;
        }
        .top-item.third {
            flex: 0.8;
            z-index: 1;
        }
        .top-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            border: 2px solid #f0f0f0;
            position: relative;
            overflow: hidden;
        }
        .top-item.first .top-avatar {
            width: 100px;
            height: 100px;
        }
        .top-rank {
            position: absolute;
            bottom: -5px;
            right: -5px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
        }
        .top-item.first .top-rank {
            background: #ffd700;
            color: #333;
        }
        .top-item.second .top-rank {
            background: #c0c0c0;
            color: #333;
        }
        .top-item.third .top-rank {
            background: #cd7f32;
            color: white;
        }
        .top-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
            text-align: center;
        }
        .top-info {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
            text-align: center;
        }
        .top-votes {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            text-align: center;
        }
        .top-item.first .top-votes {
            color: #ffd700;
        }
        .rank-list {
            margin-top: 20px;
        }
        .rank-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .rank-number {
            width: 30px;
            font-size: 16px;
            font-weight: 500;
            color: #999;
            text-align: center;
        }
        .rank-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f0f0f0;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .rank-info {
            flex: 1;
        }
        .rank-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 3px;
        }
        .rank-meta {
            font-size: 12px;
            color: #999;
        }
        .rank-votes {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-right: 5px;
        }
        .rank-trend {
            font-size: 12px;
            margin-left: 5px;
        }
        .trend-up {
            color: #4caf50;
        }
        .trend-down {
            color: #f44336;
        }
        .trend-stable {
            color: #9e9e9e;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="back-button">←</div>
            <div class="header-title">排行榜</div>
            <div class="header-action">⋮</div>
        </div>
        
        <div class="content">
            <div class="activity-info">
                <div class="activity-title">2023年度最佳员工评选</div>
                <div class="activity-meta">
                    <div>参赛作品: 24</div>
                    <div>总投票数: 3,256</div>
                    <div>截止日期: 12月20日</div>
                </div>
            </div>
            
            <div class="filter-tabs">
                <div class="filter-tab active">总榜</div>
                <div class="filter-tab">市场部</div>
                <div class="filter-tab">技术部</div>
                <div class="filter-tab">销售部</div>
                <div class="filter-tab">客服部</div>
                <div class="filter-tab">行政部</div>
            </div>
            
            <div class="top-three">
                <div class="top-item second">
                    <div class="top-avatar">
                        <div style="font-size: 24px;">👤</div>
                        <div class="top-rank">2</div>
                    </div>
                    <div class="top-name">李四</div>
                    <div class="top-info">技术部</div>
                    <div class="top-votes">245票</div>
                </div>
                <div class="top-item first">
                    <div class="top-avatar">
                        <div style="font-size: 28px;">👤</div>
                        <div class="top-rank">1</div>
                    </div>
                    <div class="top-name">张三</div>
                    <div class="top-info">市场部</div>
                    <div class="top-votes">256票</div>
                </div>
                <div class="top-item third">
                    <div class="top-avatar">
                        <div style="font-size: 24px;">👤</div>
                        <div class="top-rank">3</div>
                    </div>
                    <div class="top-name">王五</div>
                    <div class="top-info">销售部</div>
                    <div class="top-votes">198票</div>
                </div>
            </div>
            
            <div class="rank-list">
                <div class="rank-item">
                    <div class="rank-number">4</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">赵六</div>
                        <div class="rank-meta">客服部 | 客服主管</div>
                    </div>
                    <div class="rank-votes">176票</div>
                    <div class="rank-trend trend-up">↑2</div>
                </div>
                
                <div class="rank-item">
                    <div class="rank-number">5</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">钱七</div>
                        <div class="rank-meta">行政部 | 行政经理</div>
                    </div>
                    <div class="rank-votes">165票</div>
                    <div class="rank-trend trend-down">↓1</div>
                </div>
                
                <div class="rank-item">
                    <div class="rank-number">6</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">孙八</div>
                        <div class="rank-meta">技术部 | 产品经理</div>
                    </div>
                    <div class="rank-votes">142票</div>
                    <div class="rank-trend trend-stable">-</div>
                </div>
                
                <div class="rank-item">
                    <div class="rank-number">7</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">周九</div>
                        <div class="rank-meta">销售部 | 销售顾问</div>
                    </div>
                    <div class="rank-votes">128票</div>
                    <div class="rank-trend trend-up">↑3</div>
                </div>
                
                <div class="rank-item">
                    <div class="rank-number">8</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">吴十</div>
                        <div class="rank-meta">市场部 | 市场专员</div>
                    </div>
                    <div class="rank-votes">115票</div>
                    <div class="rank-trend trend-down">↓2</div>
                </div>
                
                <div class="rank-item">
                    <div class="rank-number">9</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">郑十一</div>
                        <div class="rank-meta">技术部 | 前端工程师</div>
                    </div>
                    <div class="rank-votes">98票</div>
                    <div class="rank-trend trend-up">↑1</div>
                </div>
                
                <div class="rank-item">
                    <div class="rank-number">10</div>
                    <div class="rank-avatar">👤</div>
                    <div class="rank-info">
                        <div class="rank-name">王十二</div>
                        <div class="rank-meta">客服部 | 客服专员</div>
                    </div>
                    <div class="rank-votes">87票</div>
                    <div class="rank-trend trend-down">↓1</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>